import './css/Hot.css'
import { useEffect, useState } from 'react';
import * as echarts from 'echarts';

const Table1 = () => {
    useEffect(() => {
        var myChart = echarts.init(
            document.getElementById('bar'), null, {
            width: 1000,
            height: 600
        }
        );
        myChart.setOption({
            title: {
                text: '模板总榜前六',
                left: 'center',
                top: '100px',
            },
            tooltip: {},
            xAxis: {
                data: ['星期五', '英国古堡', '悠闲午后', '桃心', 'weiwei', '植物']
            },
            yAxis: {},
            series: [
                {
                    name: '获取量',
                    type: 'bar',
                    data: [58, 43, 39, 30, 23, 22]
                }
            ]
        });
    }, [])
    return (
        <div id='bar' style={{ height: 600 }}></div>
    )
}
const Table2 = () => {
    useEffect(() => {
        var myChart = echarts.init(
            document.getElementById('bar'), null, {
            width: 1000,
            height: 600
        }
        );
        myChart.setOption({
            title: {
                text: '贴纸总榜前五',
                left: 'center',
                top: '100px',
            },
            tooltip: {},
            xAxis: {
                data: ['星星1', '金币', '蘑菇', '高跟鞋', '树木3']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [56, 37, 37, 29, 16]
                }
            ]
        });
    }, [])
    return (
        <div id='bar' style={{ height: 600 }}></div>
    )
}
const Table3 = () => {
    useEffect(() => {
        var myChart = echarts.init(
            document.getElementById('bar'), null, {
            width: 1000,
            height: 600
        }
        );
        myChart.setOption({
            title: {
                text: '用户月增长量',
                left: 'center',
                top: '100px',
            },
            xAxis: {
                data: ['21-10', '21-11', '21-12','22-1','22-2','22-3','22-4','22-5','22-6']
              },
              yAxis: {
              },
              series: [
                {
                  data: [3, 2, 4, 0, 0, 0, 2, 4, 7],
                  type: 'line'
                }
            ]
        });
    }, [])
    return (
        <div id='bar' style={{ height: 600 }}></div>
    )
}
const Table4 = () => {
    useEffect(() => {
        var pie = echarts.init(
            document.getElementById('bar'), null, {
                width: 1000,
                height: 600}
        );
        var option = {
            title: {
                text: '素材风格点击占比',
                // subtext: '。。。',
                left: 'center'
            },
            tooltip: {
                trigger: 'style'
            },
            legend: {
                left: 'center',
                top: '50px'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    top: '100px',
                    data: [
                        { value: 325, name: '自然小清新' },
                        { value: 290, name: '英伦古朴' },
                        { value: 245, name: '粉红桃心' },
                        { value: 199, name: '明星潮流' },
                        { value: 150, name: '可爱萌宠' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        pie.setOption(option)
    }, [])
    return (<div id="bar" style={{ height: 600 }}></div>)
}

const Hot = () => {
    const [page, setPage] = useState(1)
    return (
        <div className="hotPages">
            <div className="hotPageBox">
                <div className="hotPage" onClick={() => setPage(1)} style={page === 1 ? { width: '80px', backgroundColor: 'rgba(255,136,0,0.863)', color: 'white' } : {}}>
                    {page === 1 ? '总模板最热' : '板最热'}</div>
                <div className="hotPage" onClick={() => setPage(2)} style={page === 2 ? { width: '80px', backgroundColor: 'rgba(255,136,0,0.863)', color: 'white' } : {}}>
                    {page === 2 ? '总贴纸最热' : '纸最热'}</div>
                <div className="hotPage" onClick={() => setPage(3)} style={page === 3 ? { width: '80px', backgroundColor: 'rgba(255,136,0,0.863)', color: 'white' } : {}}>
                    {page === 3 ? '用户增长量' : '增长量'}</div>
                <div className="hotPage" onClick={() => setPage(4)} style={page === 4 ? { width: '80px', backgroundColor: 'rgba(255,136,0,0.863)', color: 'white' } : {}}>
                    {page === 4 ? '风格素材' : '格素材'}</div>
            </div>
            {
                page === 1 ? <Table1 /> :
                    (page === 2 ? <Table2 /> :
                        (page === 3 ? <Table3 /> :
                            <Table4 />))
            }
        </div>
    )

}
export default Hot;